<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="Login - Presto">
    <title>Cluster Overview - Presto</title>

    <link rel="icon" href="assets/favicon.ico">

    <!-- Bootstrap core -->
    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery -->
    <script type="text/javascript" src="vendor/jquery/jquery-3.5.1.min.js"></script>

    <!-- Bootstrap JS -->
    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>

    <!-- Sparkline -->
    <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>

    <!-- CSS loader -->
    <link href="vendor/css-loaders/loader.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="assets/presto.css" rel="stylesheet">

    <style type="text/css">
        .login-form {
            width: 340px;
            margin: 50px auto;
        }

        .login-form form {
            margin-bottom: 15px;
            background: #f7f7f7;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            padding: 30px;
        }

        .login-form h2 {
            color: black;
            margin: 0 0 15px;
        }

        .form-control, .btn {
            min-height: 38px;
            border-radius: 2px;
        }

        .btn {
            background-color: #337AB7;
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</head>

<body>

<div class="login-form">
    <form id="login" action="/ui/login" method="post" style="display: none">
        <h2 class="text-center">Log in</h2>
        <div class="form-group">
            <input id="username" name="username" type="text" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
            <input id="password" name="password" type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <input id="redirectPath" name="redirectPath" type="hidden">
        <div class="form-group">
            <button id="submit" type="submit" class="btn btn-primary btn-block">Log In</button>
        </div>
    </form>
</div>

<script>
    var hidePassword = false; // This value will be replaced

    var redirectPath = window.location.search.substring(1);
    if (redirectPath.indexOf('&') !== -1) {
        redirectPath = redirectPath.substring(0, redirectPath.indexOf('&'));
    }
    $("#redirectPath").val(redirectPath);

    if (hidePassword) {
        $("#password")
                .prop('required', false)
                .prop('placeholder', 'Password not allowed')
                .prop('readonly', true);
    }
    $("#login").show();
    $("#username").focus().val("");
</script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

</body>
</html>
